<template>
	<view class="login">
		<navBar :title="$t('login')"></navBar>
		<view class="logo">
			<image src="/static/image/logo.png" class="img"></image>
		</view>

		<view>
			<button v-if="checked" class="flex_col_center btn font_size_30 active" open-type="getPhoneNumber"
				@getphonenumber="handlePhoneLogin">{{$t('authorize')}}</button>
			<button :class="checked?'active': ''" class="flex_col_center btn font_size_30" @click="handlePhoneLogin"
				v-if="!checked">{{$t('authorize')}}</button>
		</view>

		<view class="tips-txt">
			<uni-data-checkbox multiple :localdata="hobby" @change="checkboxChange"></uni-data-checkbox>
			<view>{{$t('agree')}}<text class="text_color"
					@click="config.path('/pagesA/agreement/agreement')">《{{$t('user.agreement')}} 》</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		wxLogin,
		wxBindPhone,
		zfbLogin
	} from '@/api/login.js'
	export default {
		data() {
			return {
				checked: false, // 用户是否同意协议
				isShowPhone: false, // 是否要绑定手机号
				isLogin: false, // 用户是否完成登录
				hobby: [{
					value: 0
				}],
			}
		},
		methods: {
			checkboxChange(e) {
				let length = e.detail.value.length;
				this.checked = length ? true : false;
			},
			// 手机号授权登录
			handlePhoneLogin(e) {
				console.log(e, '手机')
				if (!this.checked) {
					this.config.Toast(`${this.$t('read')}！`)
					return;
				}
				const that = this;
				uni.login({
					provider: 'weixin', //使用微信登录
					onlyAuthorize: true,
					scopes: 'auth_user',
					success: function(loginRes) {
						console.log(loginRes, 'loginRes')
						if (loginRes.errMsg === 'login:ok') {
							let wxCode = loginRes.code
							// 请求后端微信登录接口
							// #ifdef MP-ALIPAY
							zfbLogin({
								code: wxCode,
							}).then((res) => {
								if (e.detail.errMsg == 'getPhoneNumber:ok') {
									console.log(res, 'resres')
									let wxPhoneCode = e.detail.code
									that.config.Toast(that.$t('login.succeeded'))
									that.$store.commit('token', res.token);
									that.$store.commit('userinfo', res)
									uni.setStorageSync('userinfo', res);
									uni.setStorageSync('token', res.token);
									that.isLogin = true;
									// 有绑定手机号直接跳转个人界面
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/user/user'
										})
									}, 1000)
								} else {
									that.$store.commit('token', null);
									uni.setStorageSync('token', null);
									that.config.Toast(`${that.$t('rejected')}！`)
								}
							});
							// #endif
							// #ifdef MP-WEIXIN
							wxLogin({
								code: wxCode
							}).then((res) => {
								if (e.detail.errMsg == 'getPhoneNumber:ok') {
									let wxPhoneCode = e.detail.code
									// 用户绑定手机号
									wxBindPhone({
										code: wxPhoneCode,
										openId: res.openid,
									}).then((r) => {
										// 下一步跳转到首页
										if (r.code === 0) {
											that.config.Toast(that.$t('login.succeeded'))
											that.$store.commit('token', r.data.token);
											that.$store.commit('userinfo', r.data)
											uni.setStorageSync('userinfo', r.data);
											uni.setStorageSync('token', r.data.token);
											that.isLogin = true;
											// 有绑定手机号直接跳转个人界面
											setTimeout(() => {
												uni.switchTab({
													url: '/pages/user/user'
												})
											}, 1000)
										}
									});
								} else {
									that.$store.commit('token', null);
									uni.setStorageSync('token', null);
									that.config.Toast(`${that.$t('rejected')}！`)
								}
							});
							// #endif

						} else {
							that.config.Toast(that.$t('login.failed'))
						}
					}
				});
			},
		},
		// 页面卸载，并且登录问完成情况下，清除token
		onUnload() {
			if (!this.isLogin) {
				this.$store.commit('token', null)
			}
		}
	}
</script>
<style>
	.uni-data-checklist .checklist-group .checklist-box {
		margin-right: 0 !important;
	}

	.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner {
		border-color: #AF9453 !important;
		background-color: #AF9453 !important;
		border-radius: 50% !important;
	}

	.uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
		border-radius: 50% !important;
	}
</style>

<style scoped lang="scss">
	.login {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100vh;
		background: #fff;

		.logo {
			margin-top: 50%;
			margin-bottom: 60%;

			.img {
				width: 391rpx;
				height: 96rpx;
			}
		}

		.btn {
			width: 519rpx;
			height: 84rpx;
			background: $uni-theme-color;
			border-radius: 10rpx;
			color: #FFFFFF;
			margin: auto;
			font-size: 30rpx;
		}

		.active {
			background: $uni-theme-color;
		}

		.tips-txt {
			font-size: 26rpx !important;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 450rpx !important;
			margin: 20rpx auto;

			.text_color {
				color: $uni-theme-color;
			}
		}
	}
</style>